/*
  学习目标：JSX-列表渲染- 数组渲染 - v-for
*/
import React from 'react';
import ReactDOM from 'react-dom';

const songs = ['温柔', '倔强', '私奔到月球'];

//  💥key要求唯一的字符串或数字
// 口诀: 有id用id, 没id用索引
const songsList = songs.map((xxx) => {
  return <li key={xxx}>{xxx}</li>;
});

const divNode = (
  <div>
    {songs}
    <ul>{songsList}</ul>

    <ul>
      {songs.map((xxx) => {
        return <li key={xxx}>{xxx}</li>;
      })}
    </ul>
  </div>
);

ReactDOM.render(divNode, document.getElementById('root'));
